<template>
	<view v-show="pageShow">
		<form @submit="formSubmit">
			<view class="uni-form-item">
				<view class="title">货品代码</view>
				<view class="uni-input-container">
					<view class="uni-input-view">
						<input class="uni-input" v-model="goodsCode" :focus="focus[0]" @input="goodsId = null;" @confirm="handleConfirmGoods" placeholder="请扫描货品代码" />
						<image src="/static/scan.png" class="scan" @click="handleScanGoods" />
					</view>
					<image src="/static/search.png" class="search" @click="handleConfirmGoods" />
				</view>
			</view>
			<view class="uni-form-item">
				<view class="title">上架数量</view>
				<input class="uni-input border" type="number" name="quantity" v-model="quantity" placeholder="请输入上架数量" />
			</view>
			<view class="uni-form-item">
				<view class="title">可上架数量</view>
				<input class="uni-input border disabled" disabled v-model="canQuantity" />
			</view>
			<view class="uni-form-item">
				<view class="title">上架货位</view>
				<view class="uni-input-container">
					<view class="uni-input-view">
						<input class="uni-input" v-model="goodsLocationCode" :focus="focus[1]" @input="goodsLocationId = null;" @confirm="handleConfirmGoodsLocation"
						 placeholder="请扫描上架货位" />
						<image src="/static/scan.png" class="scan" @click="handleScanGoodsLocation" />
					</view>
					<image src="/static/search.png" class="search" @click="handleConfirmGoodsLocation" />
				</view>
			</view>
			<view class="uni-btn-v">
				<button type="primary" form-type="submit">上架</button>
			</view>
		</form>
		<uni-popup ref="goodsSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 3;">货品代码</view>
						<view class="td" style="flex: 3;">货品名称</view>
						<view class="td" style="flex: 3;">批次号</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in goodsList" :key="item.id" @click="handleSelectGoods(item)">
							<view class="td" style="flex: 1;">
								<radio :checked="goodsId === item.id" />
							</view>
							<view class="td" style="flex: 3;">{{item.goodsCode || '-'}}</view>
							<view class="td" style="flex: 3;">{{item.goodsName || '-'}}</view>
							<view class="td" style="flex: 3;">{{item.receiveCargoNo || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="goodsLocationSelect" type="bottom">
			<view class="table">
				<view class="table-head">
					<view class="th">
						<view class="td" style="flex: 1;"></view>
						<view class="td" style="flex: 2;">货位代码</view>
						<view class="td" style="flex: 2;">储区代码</view>
						<view class="td" style="flex: 2;">货位状态</view>
					</view>
				</view>
				<scroll-view style="max-height: 600rpx;" scroll-y="true">
					<view class="table-body">
						<view class="tr" v-for="item in goodsLocationList" :key="item.id" @click="handleSelectGoodsLocation(item)">
							<view class="td" style="flex: 1;">
								<radio :checked="goodsLocationId === item.id" />
							</view>
							<view class="td" style="flex: 2;">{{item.code || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.storageAreaCode || '-'}}</view>
							<view class="td" style="flex: 2;">{{item.stateLabel || '-'}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<view class="list-card" style="margin-top: 30rpx;" v-if="!!upperTask.length">
			<uni-card>
				<view style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2rpx solid #e5e5e5; margin: -10rpx -30rpx 24rpx -30rpx; padding: 0 30rpx;">
					<view style="font-size: 28rpx;">待上架明细</view>
					<view>
						<button type="primary" size="mini" style="font-size: 24rpx; padding: 0 20rpx;" @click="handleBatchTask">一键上架</button>
					</view>
				</view>
				<view class="list-item-detail" v-for="item in upperTask" :key="item.no">
					<view class="item">
						<view>
							<label>货品代码：</label>
							<text>{{item.goodsCode || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view>
							<label>货品名称：</label>
							<text>{{item.goodsName || '-'}}</text>
						</view>
					</view>
					<view class="item">
						<view class="item-content">
							<label>货位代码：</label>
							<text>{{item.upperGoodsLocationCode || '-'}}</text>
						</view>
						<view class="item-content">
							<label>上架数量：</label>
							<text>{{item.quantity || '-'}}</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue';

	export default {
		components: {
			uniCard
		},
		data() {
			return {
				pageShow: false,
				focus: [true, false],
				inBillId: null,
				inBillCargoReceiveId: null,
				ownerId: null,
				goodsId: null,
				goodsCode: null,
				goodsList: [],
				quantity: null,
				canQuantity: 0,
				goodsLocationId: null,
				goodsLocationCode: null,
				goodsLocationList: [],
				cargoList: [],
				upperTask: []
			}
		},
		onLoad(e) {
			this.inBillId = e.id;
			uni.showLoading({
				title: '加载中'
			});
			this.$api.upperCargo.detail(this.inBillId).then(res => {
				this.ownerId = res.ownerId;
			});
			this.getCargoListAndUpperTask(() => {
				this.pageShow = true;
				uni.hideLoading();
			}, () => uni.hideLoading());
		},
		methods: {
			handleScanGoods() {
				this.$scan(res => {
					this.goodsCode = res;
					this.handleConfirmGoods();
				});
			},
			handleConfirmGoods() {
				if (this.goodsCode) {
					this.$api.goods.listScan({
						ownerId: this.ownerId,
						code: this.goodsCode
					}).then(res => {
						const _goodsCodeList = res.data.map(v => v.code.toLowerCase());
						this.goodsList = this.cargoList.filter(v => _goodsCodeList.includes(v.goodsCode.toLowerCase()));
						this.handleConfirmGoodsCallback();
					});
				} else {
					this.goodsList = [...this.cargoList];
					this.handleConfirmGoodsCallback();
				}
			},
			handleConfirmGoodsCallback() {
				if (!this.goodsList.length) {
					uni.showToast({
						title: '未匹配到待上架货品',
						icon: 'none'
					});
					return;
				}
				if (this.goodsList.length === 1) {
					const _goods = this.goodsList[0];
					this.handleSelectGoods(_goods);
				} else {
					this.$refs.goodsSelect.open();
				}
			},
			handleSelectGoods(goods) {
				this.inBillCargoReceiveId = goods.inBillCargoReceiveId;
				this.goodsId = goods.goodsId;
				this.goodsCode = goods.goodsCode;
				this.canQuantity = parseInt(goods.receiveAmount) - parseInt(goods.quantity);
				this.quantity = this.canQuantity;
				setTimeout(() => {
					this.$refs.goodsSelect.close();
					this.goodsList = [];
					this.handleFocus(1);
				}, 100);
			},
			handleScanGoodsLocation() {
				this.$scan(res => {
					this.goodsLocationCode = res;
					this.handleConfirmGoodsLocation();
				});
			},
			handleConfirmGoodsLocation() {
				this.$api.common.goodsLocationList({
					page: 1,
					limit: 100,
					query: this.goodsLocationCode,
					warehouseId: this.$storage.getWarehouseId()
				}).then(res => {
					this.goodsLocationList = res.data;
					if (!this.goodsLocationList.length) {
						uni.showToast({
							title: '未匹配到上架货位',
							icon: 'none'
						});
						return;
					}
					if (this.goodsLocationList.length === 1) {
						const _goodsLocation = this.goodsLocationList[0];
						this.handleSelectGoodsLocation(_goodsLocation);
					} else {
						this.$refs.goodsLocationSelect.open();
					}
				});
			},
			handleSelectGoodsLocation(goodsLocation) {
				this.goodsLocationId = goodsLocation.id;
				this.goodsLocationCode = goodsLocation.code;
				setTimeout(() => {
					this.$refs.goodsLocationSelect.close();
					this.goodsLocationList = [];
					this.handleFocus();
				}, 100);
			},
			handleFocus(index) {
				this.focus.map((v, i) => this.$set(this.focus, i, false));
				index && setTimeout(() => this.$set(this.focus, index, true), 300);
			},
			getCargoListAndUpperTask(successCallback, errorCallback) {
				const params = {
					id: this.inBillId
				};
				Promise.all([this.$api.upperCargo.cargoList(params), this.$api.upperCargo.upperTask(params)]).then(res => {
					this.cargoList = (res[0].data || []).filter(v => parseInt(v.receiveAmount) > parseInt(v.quantity));
					this.upperTask = (res[1].data || []).filter(v => v.upperShelfState === '1');
					if (this.cargoList.length === 1) {
						const _goods = this.cargoList[0];
						this.handleSelectGoods(_goods);
					}
					successCallback && successCallback instanceof Function && successCallback();
				}, () => errorCallback && errorCallback instanceof Function && errorCallback());
			},
			formSubmit(e) {
				if (!this.goodsId) {
					return uni.showToast({
						title: '请扫描货品代码',
						icon: 'none'
					});
				}
				if (!parseInt(this.quantity || 0)) {
					return uni.showToast({
						title: '请输入上架数量',
						icon: 'none'
					});
				}
				if (this.quantity > this.canQuantity) {
					return uni.showToast({
						title: '上架数量不能大于可上架数量',
						icon: 'none'
					});
				}
				if (!this.goodsLocationId) {
					return uni.showToast({
						title: '请扫描上架货位',
						icon: 'none'
					});
				}
				uni.showLoading({
					title: '上架中'
				});
				const params = Object.assign({}, e.detail.value, {
					inBillId: this.inBillId,
					inBillCargoReceiveId: this.inBillCargoReceiveId,
					goodsId: this.goodsId,
					goodsLocationId: this.goodsLocationId
				});
				this.$api.upperCargo.manualUpperShelf(params).then(res => {
					this.$api.upperCargo.completeUpperShelf(res.data).then(() => {
						global.$refresh = true;
						uni.hideLoading();
						uni.showToast({
							title: '上架成功',
							icon: 'success'
						});
						this.getCargoListAndUpperTask();
						this.inBillCargoReceiveId = null;
						this.goodsId = null;
						this.goodsCode = null;
						this.goodsList = [];
						this.quantity = null;
						this.canQuantity = 0;
						this.goodsLocationId = null;
						this.goodsLocationCode = null;
						this.goodsLocationList = [];
						this.checkResult();
					}, () => {
						this.getCargoListAndUpperTask();
						uni.hideLoading()
					});
				}, () => uni.hideLoading());
			},
			handleBatchTask() {
				uni.showLoading({
					title: '上架中'
				});
				const ids = this.upperTask.map(v => v.upperId).join(',');
				this.$api.upperCargo.batchTask({
					ids
				}).then(() => {
					global.$refresh = true;
					uni.hideLoading();
					uni.showToast({
						title: '上架成功',
						icon: 'success'
					});
					this.getCargoListAndUpperTask();
					this.checkResult();
				}, () => uni.hideLoading());
			},
			checkResult() {
				this.$api.upperCargo.detail(this.inBillId).then(res => {
					if (res.inBillState >= '600') {
						setTimeout(() => {
							uni.showToast({
								title: '上架完成',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						}, 1000);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-form-item .title {
		width: 170rpx;
	}

	.list-card /deep/ .uni-card {
		margin: 0 0 30rpx 0;
	}

	.list-card /deep/ .uni-card .uni-card__header {
		padding: 10rpx 24rpx;
	}
</style>
